<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>{{g.title}}</title>
		<link rel="shortcut icon" href="/static/vite/favicon.ico" type="image/x-icon" />
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			html,
			body {
				width: 100%;
				height: 100%;
			}
			body {
				line-height: 1.4;
				background-color: #444;
				font-family: '微软雅黑', Arial, Helvetica, sans-serif;
				font-size: 12px;
				color: #333;
			}
			input {
				background: none;
				box-sizing: border-box;
				-webkit-appearance: none;
			}
			button {
				outline: none;
				background: none;
				box-sizing: border-box;
			}
			::-webkit-scrollbar {
				width: 10px;
				height: 1px;
			}
			::-webkit-scrollbar-thumb {
				border-radius: 10px;
				box-shadow: inset 0 0 5px rgb(0 0 0 / 20%);
				background: #999;
			}
			::-webkit-scrollbar-track {
				box-shadow: inset 0 0 5px rgb(0 0 0 / 20%);
				border-radius: 10px;
				background: #ededed;
			}
			.hide {
				display: none !important;
			}
			.bt_link {
				text-decoration: none;
				color: #20a53a;
			}
			.main {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				height: 100%;
			}
			.login {
				position: relative;
				width: 360px;
				height: 270px;
				padding: 80px 40px 90px;
				background-color: #fff;
				border-radius: 4px;
			}
			.login.code {
				height: 345px;
			}
			.entrance {
				position: absolute;
				top: 5px;
				right: 5px;
			}
			.entrance .bg_img {
				width: 60px;
				height: 60px;
				background-image: url('');
				background-size: 120px 120px;
				background-repeat: no-repeat;
				background-position: 0 0;
				cursor: pointer;
			}
			.entrance .bg_img:hover {
				background-position: -60px 0;
			}
			.entrance .bg_img.pc {
				background-position: 0 -60px;
			}
			.entrance .bg_img.pc:hover {
				background-position: -60px -60px;
			}
			.entrance .tips {
				position: absolute;
				display: flex;
				align-items: center;
				top: 15px;
				right: 55px;
				max-width: 380px;
				padding: 8px 10px;
				background-color: #dff0d8;
				border-radius: 4px;
				text-align: center;
				white-space: nowrap;
			}
			.entrance .tips::before {
				content: '';
				position: absolute;
				top: 8px;
				right: -11px;
				width: 0;
				height: 0;
				margin-left: -6px;
				border: 6px solid #dff0d8;
				border-color: transparent transparent transparent #dff0d8;
			}
			.entrance .tips .icon {
				display: inline-flex;
			}
			.entrance .tips .text {
				display: inline-flex;
				white-space: nowrap;
			}
			.icon {
				width: 16px;
				height: 16px;
				background-size: cover;
				background-position: center;
				background-repeat: no-repeat;
			}
			.icon.scan {
				background-image: url('');
				background-size: 14px;
			}
			.icon.safe {
				background-image: url('');
			}
			.tips .text {
				margin-left: 4px;
				color: #20a53a;
			}
			.account .form_title {
				height: 40px;
				margin-bottom: 25px;
				padding: 0 25px;
				cursor: pointer;
				overflow: hidden;
				text-align: center;
				font-size: 26px;
				color: #444;
			}
			.account .form_item {
				position: relative;
				margin-bottom: 20px;
				padding: 5px 0;
			}
			.account .error_tips {
				position: relative;
				top: -14px;
				color: red;
			}
			.form_input {
				width: 100%;
				height: 42px;
				padding: 5px 10px;
				border: 1px solid #d1d1d1;
				border-radius: 3px;
				box-shadow: 0 3px 5px -4px rgb(0 0 0 / 40%) inset, -1px 0 3px -2px rgb(0 0 0 / 10%) inset;
				z-index: 1;
			}
			.form_input.validform_error {
				border: 1px solid #e53451;
				box-shadow: 0 0 2px #ea5d74;
			}
			.validform_checktip {
				position: absolute;
				top: 14px;
				right: 10px;
				height: 24px;
				padding: 0 6px;
				line-height: 24px;
				overflow: hidden;
				z-index: 1;
				text-align: right;
				font-size: 12px;
			}
			.validform_checktip.validform_wrong {
				background: #e53451;
				border-radius: 3px;
				color: #fff;
			}
			.validform_checktip.validform_right {
				padding: 0 10px;
				background-image: url('');
				background-repeat: no-repeat;
				background-position: right center;
				background-size: 16px;
			}
			.form_item.check_code {
				display: flex;
				align-items: center;
			}
			.form_item.check_code .form_input {
				flex: 1;
				width: auto;
			}
			.form_item.check_code .validform_checktip {
				right: 127px;
			}
			.form_item.check_code .check_img {
				width: 100px;
				height: 40px;
				margin-left: 16px;
				border: 1px solid #ccc;
				cursor: pointer;
			}
			.login_btn {
				width: 100%;
				height: 44px;
				background: linear-gradient(#20a53a, #189d32);
				border: 1px solid #20a53a;
				border-radius: 3px;
				cursor: pointer;
				text-align: center;
				font-size: 16px;
				color: #fff;
				box-shadow: inset 0 1px 2px #30ad42;
				text-shadow: #00851a 0 -1px 0;
			}
			.login_btn:hover {
				background: linear-gradient(#10952a, #088d22);
				border: 1px solid #10952a;
			}
			.account .forget_pwd {
				position: absolute;
				right: 40px;
				bottom: 20px;
				color: #20a53a;
			}
			.static_cdn {
				position: absolute;
				left: 0;
				bottom: 0;
				height: 40px;
				opacity: 0.8;
			}
			.static_cdn .cont {
				display: flex;
				margin-left: 40px;
			}
			.static_cdn .name {
				height: 22px;
				padding: 0 5px;
				line-height: 22px;
				border: 1px solid #ddd;
				background-color: #eee;
				color: #777;
				font-size: 12px;
			}
			.account select {
				height: 24px;
				line-height: 22px;
				margin-left: -1px;
				padding-left: 5px;
				border: 1px solid #ddd;
				color: #777;
				font-size: 12px;
			}
			.scan_code {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 100%;
			}
			.scan_code .scan_title {
				margin-bottom: 20px;
				font-size: 23px;
				color: #444;
				text-align: center;
			}
			.scan_code .qrcode {
				width: 150px;
				height: 150px;
			}
			.scan_code .scan_tip {
				margin-top: 15px;
				text-align: center;
			}
			.scan_tip .link {
				font-size: 0;
			}
			.scan_tip .link a,
			.scan_tip .link span {
				font-size: 13px;
			}
			.scan_tip .desc {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 10px;
			}
			.scan_tip .desc .icon {
				width: 25px;
				height: 25px;
				background-size: 23px;
			}
			.scan_tip .desc .text {
				margin-left: 10px;
				font-size: 18px;
				font-weight: 600;
				color: #555;
			}
			.verification_view {
				padding: 30px 40px;
			}
			.verification_view .v_title {
				height: 40px;
				margin-bottom: 15px;
				overflow: hidden;
				text-align: center;
				font-size: 21px;
				color: #444;
			}
			.verification_view .v_input {
				margin-bottom: 15px;
			}
			.verification_view .v_input input {
				width: 100%;
				height: 40px;
				padding: 4px 10px;
				line-height: 30px;
				outline: none;
				border-radius: 3px;
				box-sizing: border-box;
				border: 1px solid #d1d1d1;
				box-shadow: 0 3px 5px -4px rgb(0 0 0 / 40%) inset, -1px 0 3px -2px rgb(0 0 0 / 10%) inset;
				z-index: 1;
			}
			.verification_view .v_btn button {
				width: 100%;
				height: 40px;
				border-radius: 3px;
				border: 1px solid #20a53a;
				background: linear-gradient(#20a53a, #189d32);
				text-shadow: #00851a 0 -1px 0;
				box-shadow: inset 0 1px 2px #30ad42;
				cursor: pointer;
				text-align: center;
				font-size: 15px;
				color: #fff;
			}
			.verification_view .v_tips {
				margin-top: 18px;
				font-size: 13px;
				color: #777;
			}
			.layui-layer-msg {
				position: fixed;
				min-width: 180px;
				margin: 0;
				padding: 0;
				border-radius: 2px;
				background-color: #fff;
				border: 1px solid #d3d4d3;
				box-shadow: none;
			}
			.layui-layer-msg .layui-layer-content {
				position: relative;
				padding: 20px 20px 20px 55px;
				line-height: 24px;
				word-break: break-all;
				overflow: hidden;
				overflow-x: hidden;
				overflow-y: auto;
				font-size: 14px;
				text-align: left;
			}
			.layui-layer-msg .layui-layer-ico {
				position: absolute;
				top: 16px;
				left: 15px;
				display: inline-block;
				width: 30px;
				height: 30px;
				vertical-align: top;
				background-image: url('');
				background-repeat: no-repeat;
			}
			.layui-layer-msg .layui-layer-ico1 {
				background-position: -30px 0;
			}
			.layui-layer-msg .layui-layer-ico2 {
				background-position: -60px 0;
			}
			.layui-layer-msg .layui-layer-ico16 {
				background-image: url('');
			}
			.layui-layer-shade {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
			.layui-layer {
				position: fixed;
				border-radius: 2px;
				background-color: #fff;
				box-shadow: 1px 1px 50px rgb(0 0 0 / 30%);
			}
			.layui-layer-content {
				position: relative;
				height: 100%;
				overflow: auto;
			}
			.layui-layer-setwin {
				position: absolute;
				top: 15px;
				right: 15px;
				font-size: 0;
				line-height: initial;
			}
			.layui-layer-setwin .layui-layer-close {
				position: absolute;
				top: -28px;
				right: -28px;
				display: inline-block;
				vertical-align: top;
				width: 30px;
				height: 30px;
				background-image: url('');
				background-repeat: no-repeat;
				cursor: pointer;
				transition: all 0.4s ease-in-out;
			}
			.layui-layer-setwin .layui-layer-close:hover {
				background-image: url('');
				transform: rotate(180deg);
			}
			.login-images img {
				height: 85px;
			}
			.login-images {
				width: 440px;
				display: flex;
				margin-bottom: 25px;
				justify-content: center;
			}
			.login_lang {
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				left: 40px;
				bottom: 20px;
			}
			.login_lang .lang_label {
				margin-right: 8px;
			}
		</style>
		<script>
			var ie_version = (function () {
				var userAgent = navigator.userAgent,
					isLessIE11 = userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1,
					isEdge = userAgent.indexOf('Edge') > -1 && !isLessIE11,
					isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf('rv:11.0') > -1;
				if (isLessIE11) {
					var IEReg = new RegExp('MSIE (\\d+\\.\\d+);');
					IEReg.test(userAgent);
					var IEVersionNum = parseFloat(RegExp['$1']);
					if (IEVersionNum === 7) {
						// IE7
						return 7;
					} else if (IEVersionNum === 8) {
						// IE8
						return 8;
					} else if (IEVersionNum === 9) {
						// IE9
						return 9;
					} else if (IEVersionNum === 10) {
						// IE10
						return 10;
					} else {
						return 6;
					}
				} else if (isEdge) {
					// edge
					return 'edge';
				} else if (isIE11) {
					// IE11
					return 11;
				} else {
					// 不是ie浏览器
					return -1;
				}
			})();
			if (ie_version != -1 && ie_version < 9) {
				window.location.href = '/tips';
			}
		</script>
	</head>
	<body>
		<div class="main">
			<div class="login{% if session['code'] %} code{% endif %}">
				<div class="account">
					<div class="last_token" style="display: block" data="{{data['last_login_token']}}"></div>
					<div class="public_key" style="display: block" data="{{data['public_key']}}"></div>
					<form class="login_form" onsubmit="return false;">
						<div class="form_title">{{g.title}}</div>
						<div class="form_item">
							<input type="text" class="form_input" id="username" data-i18n="Login.index_1" placeholder="" />
							<div class="validform_checktip"></div>
						</div>
						<div class="form_item">
							<input type="password" class="form_input" id="password" data-i18n="Login.index_2" placeholder="" />
							<div class="validform_checktip"></div>
						</div>
						<div class="error_tips"></div>
						<div class="form_item check_code{% if not session['code'] %} hide{% endif %}">
							<input type="text" class="form_input" id="code" data-i18n="Login.index_8" placeholder="" />
							<div class="validform_checktip"></div>
							<img class="check_img" data-i18n="Login.index_9" title="" src="/code" onClick="this.src = this.src.split('?')[0] + '?' + new Date().getTime()" />
						</div>
						<!-- 登录按钮 -->
						<button class="login_btn" data-i18n="Login.index_3"></button>
						<!-- 语言切换 -->
						<div class="login_lang">
							<div class="lang_label" data-i18n="Login.index_5"></div>
							<select id="lang_select"></select>
						</div>
						<!-- 忘记密码 -->
						<a class="forget_pwd" href="https://www.aapanel.com/forum/d/16-how-to-reset-password-for-aapanel-linux-6-x" target="_blank" data-i18n="Login.index_4"></a>
						{% if data['hosts'] != '[]' %}
						<div class="static_cdn">
							<div class="cont">
								<div class="name" data-i18n="Login.index_20"></div>
								<select id="static_cdn">
									<option value="localhost" data-i18n="Login.index_21"></option>
								</select>
							</div>
						</div>
						{% endif %}
					</form>
				</div>
				<div class="scan_code hide">
					<div class="scan_title" data-i18n="Login.index_12"></div>
					<div class="qrcode" id="qrcode"></div>
					<div class="scan_tip">
						<div class="link">
							<span data-i18n="Login.index_13"></span>
							<a href="https://www.aapanel.com/forum/d/3527-aapanel-mobile" target="_blank" class="bt_link" data-i18n="Login.index_14"></a>
						</div>
						<div class="desc">
							<div class="icon scan"></div>
							<div class="text" data-i18n="Login.index_15"></div>
						</div>
					</div>
				</div>
				<div class="entrance">
					<div class="bg_img"></div>
					<div class="tips">
						<div class="icon scan"></div>
						<div class="text" data-i18n="Login.index_10"></div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="/static/js/md5.js"></script>
		<script type="text/javascript" src="/static/js/qrcode.min.js"></script>
		<script type="text/javascript" src="/static/js/jsencrypt.min.js"></script>
		<script src="/static/js/i18next.min.js"></script>
		<script>
			var lang = '{{data.login_lang}}';
			var langData = JSON.parse(atob('{{data.login_translations}}'));

			console.log(langData);

			for (var key in langData) {
				langData[key] = {
					translation: langData[key],
				};
			}

			i18next.init(
				{
					lng: lang,
					resources: langData,
				},
				function () {
					updateContent();
				}
			);

			// 切换语言
			function changeLanguage(lang) {
				i18next.changeLanguage(lang, function (err, t) {
					updateContent();
				});
			}

			// 更新带有 data-i18n 属性的元素内容
			function updateContent() {
				document.querySelectorAll('[data-i18n]').forEach(function (element) {
					const key = element.getAttribute('data-i18n');
					switch (element.tagName.toLocaleLowerCase()) {
						case 'input':
							element.setAttribute('placeholder', i18next.t(key));
							break;
						case 'img':
							element.setAttribute('title', i18next.t(key));
							break;
						default:
							element.innerHTML = i18next.t(key);
							break;
					}
				});
			}

			// 左右清空空格
			if (typeof String.prototype.trim === 'undefined') {
				String.prototype.trim = function () {
					return String(this).replace(/^\s+|\s+$/g, '');
				};
			}

			window.onload = function () {
				run();
			};

			function rsa_encrypt(text) {
				var publicKey = document.querySelector('.public_key').attributes.data.value;
				if (publicKey.length < 10) return text;
				var encrypt = new JSEncrypt();
				encrypt.setPublicKey(publicKey);
				return encrypt.encrypt(text);
			}

			/**
			 * 加载完js后运行
			 */
			function run() {
				// 请求
				var request = new Request();
				// 时间
				var timer = null;
				// 二维码
				var qrcode = null;
				// 弹框
				var popup = new Popup();
				// 登录框
				var loginBox = document.querySelector('.login');
				// 登录按钮
				var loginBtn = document.querySelector('.login_btn');
				// 用户名input框
				var usernameInput = document.querySelector('#username');
				// 密码input框
				var passwordInput = document.querySelector('#password');
				// 验证码input框
				var codeInput = document.querySelector('#code');
				// 静态cdn选择框框
				var staticCdnSelect = document.querySelector('#static_cdn');
				// 错误提示框
				var errorTipsBox = document.querySelector('.error_tips');
				// 验证码
				var checkCodeBox = document.querySelector('.check_code');
				// 验证码图片
				var checkImg = document.querySelector('.check_img');
				// 切换二维码
				var entrance = document.querySelector('.entrance').querySelector('.bg_img');

				/**
				 * 显示验证码
				 */
				function show_check_img() {
					checkCodeBox.classList.remove('hide');
					checkImg.click();
				}
				/**
				 * 判断是否为空
				 */
				function is_empty(val) {
					return val === '' || val === undefined || val === null;
				}
				/**
				 * 单独验证
				 */
				function dom_validation(dom, tips, key) {
					var val = dom.value;
					var checktip = dom.parentNode.querySelector('.validform_checktip');
					if (!checktip) return;
					if (is_empty(val)) {
						dom.classList.add('validform_error');
						checktip.classList.add('validform_wrong');
						checktip.classList.remove('validform_right');
						checktip.innerText = tips;
						checktip.setAttribute('data-i18n', key);
					} else {
						dom.classList.remove('validform_error');
						checktip.classList.remove('validform_wrong');
						checktip.classList.add('validform_right');
						checktip.innerText = '';
						checktip.removeAttribute('data-i18n');
					}
				}
				/**
				 * 表单验证
				 */
				function form_validation(callback) {
					var username = usernameInput.value.trim();
					var password = passwordInput.value.trim();
					if (is_empty(username) || is_empty(password)) {
						popup.msg(i18next.t('Login.index_7'));
					}
					if (is_empty(username)) {
						dom_validation(usernameInput, i18next.t('Login.index_6'), 'Login.index_6');
						usernameInput.focus();
						return;
					}
					if (is_empty(password)) {
						dom_validation(passwordInput, i18next.t('Login.index_2'), 'Login.index_2');
						passwordInput.focus();
						return;
					}
					var code = codeInput.value.trim();
					var isHide = checkCodeBox.classList.contains('hide');
					if (!isHide && is_empty(code)) {
						popup.msg(i18next.t('Login.index_23'));
						dom_validation(codeInput, i18next.t('Login.index_8'), 'Login.index_8');
						codeInput.focus();
						return;
					}
					var last_token = document.querySelector('.last_token').attributes.data.value;
					var data = {
						username: rsa_encrypt(md5(md5(username + last_token))),
						password: rsa_encrypt(md5(md5(password) + '' + '_bt.cn')),
						code: code,
					};
					if (staticCdnSelect) {
						var index = staticCdnSelect.selectedIndex;
						data['cdn_url'] = staticCdnSelect.options[index].value;
					}
					if (callback) callback(data);
				}
				/**
				 * 设置每秒请求
				 */
				function set_control_time() {
					timer = setInterval(function () {
						request.post('/public?name=app&fun=is_scan_ok', {}, function (res) {
							if (res.status) {
								popup.msg(i18next.t('Login.index_24'), { time: 0, icon: 1 });
								clear_control_time();
								login_admin(res.msg);
							}
						});
					}, 2000);
				}
				/**
				 * 清除设置请求
				 */
				function clear_control_time() {
					if (timer) clearInterval(timer);
				}
				/**
				 * 登录
				 */
				function login_admin(key) {
					request.post(
						'/public?name=app&fun=set_login',
						{
							secret_key: key,
						},
						function (res) {
							if (res.status) {
								popup.msg(
									i18next.t('Login.index_25'),
									{
										icon: 16,
										time: 800,
										shade: [0.4, '#fff'],
									},
									function () {
										window.location.href = '/';
									}
								);
							} else {
								popup.msg(res.msg, { icon: 2 });
							}
						}
					);
				}
				/**
				 * 生成验证码
				 */
				function generate_qrcode() {
					if (qrcode) qrcode.clear();
					request.post('/public?name=app&fun=login_qrcode', {}, function (res) {
						var text = res.status ? res.msg : 'https://www.aapanel.com/app.html';
						if (qrcode) {
							qrcode.makeCode(text);
						} else {
							qrcode = new QRCode('qrcode', {
								width: 150,
								height: 150,
								colorLight: '#fefefe',
								colorDark: '#333',
								text: text,
							});
						}
					});
				}
				// 用户名校验
				usernameInput.onblur = function () {
					dom_validation(this, i18next.t('Login.index_6'), 'Login.index_6');
				};
				// 密码校验
				passwordInput.onblur = function () {
					dom_validation(this, i18next.t('Login.index_2'), 'Login.index_2');
				};
				// 验证码校验
				codeInput.onblur = function () {
					dom_validation(this, i18next.t('Login.index_8'), 'Login.index_8');
				};
				// 登录
				loginBtn.onclick = function () {
					form_validation(function (data) {
						popup.msg(i18next.t('Login.index_22'), { time: 0, icon: 16, shade: [0.3, '#333'] });
						request.post('/login', data, function (res) {
							popup.remove_msg();
							if (res == '1') {
								popup.open({
									content:
										'\
										<div class="verification_view">\
												<div class="v_title">' +
										i18next.t('Login.index_16') +
										'</div>\
														<div class="v_input">\
																<input type="text" class="v_code" placeholder="' +
										i18next.t('Login.index_8') +
										'" />\
														</div>\
														<div class="v_btn">\
																<button id="auth_verif_btn">' +
										i18next.t('Login.index_3') +
										'</button>\
														</div>\
														<div class="v_tips">' +
										i18next.t('Login.index_17') +
										'<br><a class="bt_link" href="https://www.aapanel.com/forum/d/357-how-to-use-google-authenticator-in-the-aapanel" target="_blank">' +
										i18next.t('Login.index_18') +
										'</a>\
												</div>\
										</div>\
									',
									callback: function () {
										var btn = document.querySelector('#auth_verif_btn');
										var codeInput = document.querySelector('.v_code');
										codeInput.onkeydown = function (e) {
											if (e.keyCode == 13) btn.click();
										};
										btn.onclick = function () {
											var code = codeInput.value.trim();
											if (is_empty(code)) {
												popup.msg(i18next.t('Login.index_19'));
												return;
											}
											data['vcode'] = code;
											popup.msg(i18next.t('Login.index_22'), { icon: 16, shade: [0.3, '#333'] });
											request.post('/login', data, function (rdata) {
												popup.remove_msg();
												if (!rdata.status) {
													popup.msg(rdata.msg, { icon: 2 });
													return false;
												}
												popup.msg(
													rdata.msg,
													{
														icon: 16,
														time: 800,
														shade: [0.3, '#000'],
													},
													function () {
														window.location.href = '/';
													}
												);
											});
										};
									},
								});
								return;
							}
							var status = res.status;
							if (!status) {
								popup.msg(res.msg);
								codeInput.value = '';
								passwordInput.value = '';
								errorTipsBox.innerHTML = res.msg;
								loginBox.classList.add('code');
								show_check_img();
								return;
							}
							popup.msg(res.msg, { time: 0, icon: 16, shade: [0.3, '#333'] });
							setTimeout(function () {
								window.location.href = '/';
							}, 1000);
						});
					});
				};

				// 切换登录方式
				entrance.onclick = function () {
					var tips = this.nextSibling.nextSibling;
					var icon = tips.querySelector('.icon');
					var text = tips.querySelector('.text');
					var scanCode = document.querySelector('.scan_code');
					var account = document.querySelector('.account');
					if (this.classList.contains('pc')) {
						this.classList.remove('pc');
						icon.classList.add('scan');
						icon.classList.remove('safe');
						text.innerText = i18next.t('Login.index_10');
						account.classList.remove('hide');
						scanCode.classList.add('hide');
						clear_control_time();
					} else {
						this.classList.add('pc');
						icon.classList.add('safe');
						icon.classList.remove('scan');
						text.innerText = i18next.t('Login.index_11');
						account.classList.add('hide');
						scanCode.classList.remove('hide');
						generate_qrcode();
						set_control_time();
					}
				};

				window.onresize = function () {
					popup.set_msg_center();
					popup.set_open_center();
				};

				if ("{{data['app_login']}}" == 'True') {
					entrance.click();
				}

				// 获取语言列表
				function getLangList() {
					request.post('/userLang?action=get_language', {}, function (res) {
						var langSelect = document.querySelector('#lang_select');
						var langList = res.message.languages;
						var lang = res.message.default;

						for (var i = 0; i < langList.length; i++) {
							var option = document.createElement('option');
							option.value = langList[i].name;
							option.innerText = langList[i].title;
							if (lang == langList[i].name) {
								option.selected = true;
							}
							langSelect.appendChild(option);
						}
					});
				}

				getLangList();

				var langSelect = document.querySelector('#lang_select');

				langSelect.onchange = function () {
					var lang = this.value;
					popup.msg(i18next.t('Login.index_22'), { icon: 16, shade: [0.3, '#333'] });
					request.post('/userLang?action=set_language', { name: lang }, function (res) {
						popup.remove_msg();
						if (res.status === 0) {
							// popup.msg(res.message.result, { icon: 1 });
							changeLanguage(lang);
						}
					});
				};
			}
			/**
			 * 请求
			 */
			function Request() {
				this.xhr = new XMLHttpRequest();
			}
			Request.prototype = {
				post: function (url, data, callback) {
					var option = {
						method: 'POST',
						url: url,
						callback: callback,
					};
					var form = new FormData();
					for (var key in data) {
						if (data[key] !== '' && data[key] !== undefined && data[key] !== null) {
							form.append(key, data[key]);
						}
					}
					option.data = form;
					this.http(option);
				},
				http: function (option) {
					var xhr = this.xhr;
					var toUrl = window.location.protocol + '//' + window.location.host + option.url;
					var method = option.method || 'GET';
					// 打开连接
					xhr.open(method, toUrl, true);
					// 发送请求
					if (method == 'GET') {
						xhr.send();
					} else if (method == 'POST') {
						xhr.send(option.data);
					}
					// 请求后的回调接口
					xhr.onreadystatechange = function () {
						if (xhr.readyState == 4 && xhr.status == 200) {
							var res = xhr.responseText;
							res = res ? JSON.parse(res) : '';
							if (option.callback) option.callback(res);
						}
					};
				},
			};
			/**
			 * 弹框
			 */
			function Popup() {
				this.zIndex = 200000;
			}
			Popup.prototype = {
				/**
				 * 弹框
				 */
				open: function (option) {
					var _this = this;
					option = option || {};
					this.set_open_option(option);
					this.add_overlay(option);
					var container = document.createElement('div');
					container.classList.add('layui-layer');
					var content = document.createElement('div');
					content.classList.add('layui-layer-content');
					var setwin = document.createElement('div');
					setwin.classList.add('layui-layer-setwin');
					var close = document.createElement('a');
					close.classList.add('layui-layer-close');
					if (option.area[0]) container.style.width = option.area[0];
					if (option.area[1]) container.style.height = option.area[1];
					content.innerHTML = option.content;
					close.onclick = function () {
						_this.remove_open();
					};
					container.style['z-index'] = this.zIndex;
					this.zIndex++;
					setwin.appendChild(close);
					container.appendChild(content);
					container.appendChild(setwin);
					document.documentElement.appendChild(container);
					this.set_open_center('layui-layer');
					if (option.callback) option.callback();
				},
				/**
				 * 提示框
				 */
				msg: function (msg, option, callback) {
					var _this = this;
					option = option || {};
					this.remove_msg();
					this.add_overlay(option);
					this.set_msg_option(option);
					var container = document.createElement('div');
					container.className = 'layui-layer-msg';
					container.style['z-index'] = 200000;
					var box = document.createElement('div');
					box.className = 'layui-layer-content';
					var icon = document.createElement('i');
					icon.className = 'layui-layer-ico layui-layer-ico' + option.icon;
					box.appendChild(icon);
					box.innerHTML += msg;
					container.style['z-index'] = this.zIndex;
					this.zIndex++;
					container.appendChild(box);
					document.documentElement.appendChild(container);
					this.set_msg_center();
					if (option.time !== 0) {
						setTimeout(function () {
							_this.remove_msg();
							if (callback) callback();
						}, option.time);
					}
				},
				/**
				 * 添加遮罩层
				 */
				add_overlay: function (option) {
					if (option.hasOwnProperty('shade')) {
						var shade = option.shade;
						var overlay = document.createElement('div');
						overlay.className = 'layui-layer-shade';
						overlay.style.opacity = shade[0];
						overlay.style['background-color'] = shade[1];
						overlay.style['z-index'] = this.zIndex;
						this.zIndex++;
						document.documentElement.appendChild(overlay);
					}
				},
				/**
				 * 弹框配置项
				 */
				set_open_option: function (option) {
					var defaultOption = {
						area: ['390px', '280px'],
						shade: [0.3, '#000'],
						content: '',
					};
					this.set_option(option, defaultOption);
				},
				/**
				 * msg配置项
				 */
				set_msg_option: function (option) {
					var defaultOption = {
						icon: 2,
						time: 2000,
					};
					this.set_option(option, defaultOption);
				},
				/**
				 * 设置默认配置项
				 */
				set_option: function (option, defaultOption) {
					for (var key in defaultOption) {
						if (option[key] === undefined) {
							option[key] = defaultOption[key];
						}
					}
				},
				/**
				 * 提示框设置居中
				 */
				set_msg_center: function () {
					this.set_center('layui-layer-msg');
				},
				/**
				 * 弹框设置居中
				 */
				set_open_center: function () {
					this.set_center('layui-layer');
				},
				/**
				 * 设置居中
				 */
				set_open_center: function () {
					this.set_center('layui-layer');
				},
				/**
				 * 居中
				 */
				set_center: function (_class) {
					var dom = document.querySelector('.' + _class);
					if (!dom) return;
					var bodyWidth = document.documentElement.clientWidth;
					var bodyHeight = document.documentElement.clientHeight;
					var domWidth = dom.clientWidth;
					var domHeight = dom.clientHeight;
					dom.style.left = (bodyWidth - domWidth) / 2 + 'px';
					dom.style.top = (bodyHeight - domHeight) / 2 + 'px';
				},
				/**
				 * 删除提示框
				 */
				remove_msg: function () {
					this.remove('layui-layer-msg');
				},
				/**
				 * 删除弹框
				 */
				remove_open: function () {
					this.remove('layui-layer');
				},
				/**
				 * 删除
				 */
				remove: function (_class) {
					var dom = document.querySelector('.' + _class);
					if (!dom) return;
					var overlay = dom.previousElementSibling;
					if (overlay.classList.contains('layui-layer-shade')) {
						document.documentElement.removeChild(overlay);
						this.zIndex--;
					}
					document.documentElement.removeChild(dom);
					this.zIndex--;
				},
			};
		</script>
	</body>
</html>
